import { useEffect } from "react";
import { CloseOutlined } from "@ant-design/icons";
import type { DescriptionsProps } from "antd";
import { Button, Descriptions, Drawer, Flex, Skeleton, Tag } from "antd";
import { useCardList } from "@/api/user";

import { UesrBusinessCardDataType } from "@/types/user";

type CardDrawerProps = {
  open: boolean;
  userId?: number;
  onClose: () => void;
};

export default function CardDrawer({ open, userId, onClose }: CardDrawerProps) {
  const { data, loading: isFetching, runAsync: fetchList } = useCardList();

  useEffect(() => {
    if (open && userId) {
      fetchList(userId);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, userId]);

  const renderContent = (item: UesrBusinessCardDataType) => {
    const items: DescriptionsProps["items"] = [
      {
        key: "1",
        label: "名片介绍",
        span: 3,
        children: <p>{data.description}</p>,
      },
      {
        key: "2",
        label: "联系方式",
        span: 3,
        children: <p>{data.mobile}</p>,
      },
      {
        key: "3",
        label: "我的报价",
        span: 3,
        children: (
          <Descriptions>
            <Descriptions.Item label="原创图文笔记（报备）" span={2} className="w-1/2">
              <p>{data.officialNotePrice}</p>
            </Descriptions.Item>
            <Descriptions.Item label="原创图文笔记（非报备）" span={2} className="w-1/2">
              <p>{data.notePrice}</p>
            </Descriptions.Item>
            <Descriptions.Item label="原创视频笔记（报备）" span={2} className="w-1/2">
              <p>{data.officialVideoPrice}</p>
            </Descriptions.Item>
            <Descriptions.Item label="原创视频笔记（非报备）" span={2} className="w-1/2">
              <p>{data.videoPrice}</p>
            </Descriptions.Item>
            <Descriptions.Item label="素材直发" span={3}>
              <p>{data.directPostPrice}</p>
            </Descriptions.Item>
          </Descriptions>
        ),
      },
      {
        key: "5",
        label: "收货地址",
        children: <p>{data.shippingAddress}</p>,
      },
    ];
    return (
      <div key={item.id}>
        <div className=" text-white mb-2 rounded-t-lg">
          <Flex justify="space-between" align="center">
            <h2 className="bg-black text-lg font-medium py-2 px-4 rounded-md">
              {item.title || `我的小红书名片名称`}
            </h2>
            {item.isDefault && (
              <Tag color="blue" className="flex justify-center items-center m-0">
                默认名片
              </Tag>
            )}
          </Flex>
        </div>
        <Descriptions items={items} />
      </div>
    );
  };

  return (
    <Drawer
      open={open}
      closable={false}
      maskClosable={false}
      title={
        <Flex justify="space-between" align="center">
          <div>
            <span className="text-sm text-gray-500 font-normal mr-2">名片共计</span>
            <span className="text-xl font-bold">{data?.total || 0}个</span>
          </div>
          <Button icon={<CloseOutlined />} type="text" size="small" onClick={onClose} />
        </Flex>
      }
      width={680}
    >
      {isFetching && <Skeleton active className="h-full" />}

      {!isFetching && data?.items && data.items.length > 0 && (
        <div className="px-2">{data.items.map((item: UesrBusinessCardDataType) => renderContent(item))}</div>
      )}

      {!isFetching && (!data?.items || data.items.length === 0) && (
        <Flex justify="center" align="center" className="h-full">
          <span className="text-sm text-gray-400 font-normal">暂无名片</span>
        </Flex>
      )}
    </Drawer>
  );
}
